<template>
  <div class="app">
    <h3>我是APP组件(祖)----{{ name }}---{{ price }}</h3>
    <button @click="changeName">修改车名</button>
    <button @click="changePrice">修改车价格</button>
    <hr>
    <Child/>
  </div>
</template>

<script>


import Child from "@/components/child.vue";

import {provide, reactive, toRefs} from "vue";

export default {
  name: 'App',
  components: {Child},
  setup() {

    let cat = reactive({
      name: '奔驰',
      price: '40w'
    })
    provide('car', cat)  //provide函数,第一个参数为传递过去的名字,第二个参数为需要传递的数据
    function changeName() {
      cat.name = '宝马'
    }

    function changePrice() {
      cat.price = '45w'
    }

    return {
      ...toRefs(cat),
      changeName,
      changePrice
    }

  },


}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
